<template>
	<view>
		<view class="coupon-bg" @tap="onSelectCou">
			<img class="coupon-bg-img" src="https://yinjia.oss-cn-beijing.aliyuncs.com/haizili/coupon_bg.png" alt="">
			<view class="price">￥<span>{{couponData.price}}</span></view>
			<view class="text">{{couponData.detail}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "coupon",
		props: {
			couponData: {
				type: Object,
				default: {
					price: 50,
					detail: "商品抵扣券",
					id: 1
				}
			}
		},
		data() {
			return {

			};
		},
		methods: {
			onSelectCou() {
				this.$emit(
					'selectCou', {
						detail: {
							price: this.couponData.price,
							id: this.couponData.id
						}
					}, {}
				);
			}
		}
	}
</script>

<style>
	.coupon-bg {
		width: 100%;
		position: relative;
		padding: 10rpx 0;
		border-bottom: 1rpx dashed #ccc;
	}

	.coupon-bg-img {
		width: 90%;
		margin: 0 5%;
		height: 150rpx;
	}

	.price {
		position: absolute;
		color: #ffffff;
		z-index: 10;
		left: 80rpx;
		top: 52rpx;
		font-size: 30rpx
	}

	.price>span {
		font-size: 60rpx
	}

	.text {
		position: absolute;
		color: #ffffff;
		z-index: 10;
		right: 19%;
		top: 55rpx;
		font-size: 40rpx
	}
</style>
